<template>
	<view class="content">
		<view class="logo-row">
			<image class="logo" :src="bannerImgSrc"></image>
		</view>
		
		<view class="uni-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db" >服务器地址：</view>
				<input class="uni-input"  placeholder="请填写IP或域名" v-model="serverHost" style="width: 80%;" @input="clearInput" />
				<view class="uni-icon uni-icon-clear" @click="clearIcon"></view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">设备类型：</view>
				<view class="uni-list-cell-pd">
				<radio-group name="radio" @change="rdChangeDeviceType">
					<label>
						<radio value="Phone" :checked="chkedPhone" />手机Phone
					</label>
					<label>
						<radio value="Pad" :checked="chkedPad"  />平板Pad
					</label>
				</radio-group>
				</view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">缓存登录密码：</view>
				<switch name="switch" :checked="passwordStoreEnable" @change="swChangePasswordEnable" />
			</view>
		</view>
		<view class="btn-row">
		    <button type="primary" class="primary" @tap="bindSave">保存</button>
		</view>
	</view>
</template>

<script>
	import service from "../../service.js"

	export default {
		components: {
			
		},
		data() {
			return {
				serverHost: "",
				bannerImgSrc: '../../static/img/default-login-banner.jpg',
				passwordStoreEnable: false,
				deviceType: 'Phone',
				chkedPad: false,
				chkedPhone: false,
				// inputHostValue: '',
				showClearIcon: false
			};
		},
		onLoad:function(option) {
			if (option && option.logo)	this.bannerImgSrc = this.$serverBaseUrl + option.logo;
			this.serverHost = service.getServerHost();
			this.passwordStoreEnable = service.getPasswordStoreEnable();
			
			let deviceType = service.getDeviceType();console.log("onload deviceType:" + deviceType);
			if (deviceType == 'Pad') this.chkedPad = true;
			else this.chkedPhone = true;
		},
		methods: {
			bindSave() {
				if (this.passwordStoreEnable == false) {
					console.log("1");
					let userInfoStore = service.getUser();
					service.setUser(userInfoStore.account, '');	
				}
				if ( this.serverHost.indexOf("http") < 0 ) this.serverHost = "http://" + this.serverHost;
				service.setServerHost(this.serverHost);
				service.setDeviceType(this.deviceType);
				service.setPasswordStoreEnable(this.passwordStoreEnable);
				uni.navigateBack({
					delta: 1
				})
			},
			swChangePasswordEnable: function (e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				//service.setPasswordStoreEnable(e.target.value);		
				this.passwordStoreEnable = e.detail.value;
			},
			rdChangeDeviceType: function (e) {console.log(e.target.value);
				//service.setDeviceType(e.target.value);
				this.deviceType = e.target.value;
			},
			clearIcon: function() {
				this.serverHost = '';
				this.showClearIcon = false;
			},
			clearInput: function(event) {
				this.serverHost = event.target.value;
				if (event.target.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			}
		}
	}
</script>

	
<style>
	.uni-icon-clear,
	.uni-icon-eye {
		color: #999;
	}
	
    .logo {
		width: 80%;
		height: 155px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.logo-row {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: center;
	}
	
		.input-group {
	    background-color: #ffffff;
	    margin-top: 40upx;
	    position: relative;
	}
	
	.input-group::before {
	    position: absolute;
	    right: 0;
	    top: 0;
	    left: 0;
	    height: 1upx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	.input-group::after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    height: 1upx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	.input-row {
	    display: flex;
	    flex-direction: row;
	    position: relative;
	}
	
	.input-row .title {
	    width: 20%;
	    height: 50upx;
	    min-height: 50upx;
	    padding: 15upx 0;
	    padding-left: 30upx;
	    line-height: 50upx;
	}
	
	.input-row.border::after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 15upx;
	    height: 1upx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	.btn-row {
	    margin-top: 50upx;
	    padding: 20upx;
	}
	
	button.primary {
	    background-color: #0faeff;
	}
</style>
